<template>
    <div>
        <el-dialog v-model="props.visible" title="工艺流程" width="40%" @close="handleCancel">
            <el-form :model="form" :rules="rules" ref="userRef" :inline="true">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工艺名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入工艺名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工艺步骤" prop="step">
                            <el-input
                                type="number"
                                :min="1"
                                @change="changeStep"
                                v-model="form.step"
                                placeholder="请输入工艺步骤"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="container-box">
                <el-form :model="data" ref="printTechnologyForm" :disabled="flag" class="data-form">
                    <div
                        style="width: 300px"
                        v-for="(item, index) in data.mesPrintTechnologyDetailList"
                        :key="item"
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin: 15px 0;
                            "
                        >
                            <el-form-item
                                :prop="'mesPrintTechnologyDetailList.' + index + '.procedureName'"
                                :rules="[
                                    {
                                        required: true,
                                        message: '工艺',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <el-select
                                    style="width: 150px; margin-right: 10px"
                                    v-model="item.procedureName"
                                    placeholder="请选择工艺"
                                >
                                    <el-option
                                        v-for="ele in produce_technics"
                                        :key="ele.value"
                                        :label="ele.label"
                                        :value="ele.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                :prop="'mesPrintTechnologyDetailList.' + index + '.machineType'"
                                :rules="[
                                    {
                                        required: true,
                                        message: '类型',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <el-select
                                    v-model="item.machineType"
                                    style="width: 150px"
                                    placeholder="请选择类型"
                                >
                                    <el-option
                                        v-for="item in ems_machine_info_type"
                                        :key="item.value"
                                        :value="item.value"
                                        :label="item.label"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-icon style="margin: 0 15px"
                                ><Right v-if="index !== mesPrintTechnologyDetailList.length - 1"
                            /></el-icon>
                        </div>
                    </div>
                </el-form>
            </div>

            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="handleCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

import { addTechnology, getByIdTechnology } from '@/api/production/technics.js'

const emit = defineEmits(['changeUpdate', 'cancel', 'success'])
// import { listPaper } from '@/api/basicInfo/paperCoding.js'
const { proxy } = getCurrentInstance()
const printTechnologyForm = ref(null)
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    selsetId: {
        type: String,
        default: '',
    },
})
const route = useRoute()
const userRef = ref(null)
const data = reactive({
    mesPrintTechnologyDetailList: [],
    form: {},
    rules: {
        name: [{ required: true, message: '工艺名称不能为空', trigger: ['blur'] }],
        step: [{ required: true, message: '工艺步骤不能为空', trigger: ['blur'] }],
    },
})

const { produce_technics, ems_machine_info_type } = proxy.useDict(
    'produce_technics',
    'ems_machine_info_type'
)
// const mesPrintTechnologyDetailList = ref([])
const { form, rules, mesPrintTechnologyDetailList } = toRefs(data)

watch(
    () => props.visible,
    (val) => {
        if (val) {
        }
    }
)
watch(
    () => props.selsetId,
    (val) => {
        if (val) {
            console.log(props.selsetId)
            getByIdTechnology({ id: val }).then((res) => {
                form.value.id = res.data.id
                form.value.name = res.data.name
                form.value.step = res.data.step
                mesPrintTechnologyDetailList.value = res.data.mesPrintTechnologyDetailList
            })
        }
    }
)

const handleCancel = () => {
    proxy.resetForm('userRef')
    mesPrintTechnologyDetailList.value = []
    form.value.id = ''
    emit('cancel')
}
const changeStep = (step) => {
    mesPrintTechnologyDetailList.value = []
    if (step > 0) {
        for (let index = 0; index < step; index++) {
            mesPrintTechnologyDetailList.value.push({ procedureName: undefined })
        }
    }
}
// 保存
const submitForm = async () => {
    try {
        mesPrintTechnologyDetailList.value.forEach((item, index) => {
            item.procedureOrder = index
        })
        await userRef.value.validate()
        await printTechnologyForm.value.validate()
        if (form.value.id) {
            await addTechnology({
                ...form.value,
                mesPrintTechnologyDetailList: mesPrintTechnologyDetailList.value,
            })
            ElMessage({
                message: '编辑成功',
                type: 'success',
            })
        } else {
            await addTechnology({
                ...form.value,
                mesPrintTechnologyDetailList: mesPrintTechnologyDetailList.value,
            })
            ElMessage({
                message: '新增成功',
                type: 'success',
            })
        }
        emit('success')
        mesPrintTechnologyDetailList.value = []
        form.value.id = ''
    } catch {}
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 20px;
}
.container-box {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-flow: row wrap;
}
.el-form-item{
    margin-bottom: 0 !important;
}
</style>
